<template>
  <el-container style="height: 100vh">
    <!-- 侧边导航 -->
    <el-aside width="200px" style="background-color: #f4f4f4">
      <p style="padding: 20px">侧边导航区域</p>
    </el-aside>

    <el-container>
      <!-- 页眉 -->
      <el-header style="background-color: #409EFF; color: white">
        <span style="font-size: 18px">Element UI 示例练习</span>
      </el-header>

      <!-- 主体内容 -->
      <el-main style="padding: 20px">
        <el-card>
          <h3>📁 文件上传区域</h3>
          <el-upload
            class="upload-demo"
            drag
            :http-request="handleUpload"
            :auto-upload="false"
            :on-change="fileChanged"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">拖拽或点击上传 PDF 文件</div>
            <div slot="tip" class="el-upload__tip">只能上传 PDF 文件</div>
          </el-upload>

          <el-button type="primary" style="margin-top: 10px" @click="submit">
            提交分析
          </el-button>
        </el-card>

        <el-divider></el-divider>

        <!-- 登录表单 -->
        <el-card>
          <h3>📋 登录表单</h3>
          <el-form :model="form" label-width="80px">
            <el-form-item label="用户名">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="form.password" type="password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="success" @click="onLogin">登录</el-button>
            </el-form-item>
          </el-form>
        </el-card>

        <el-divider></el-divider>

        <!-- 标签页 + 弹窗 -->
        <el-card>
          <h3>🧪 标签页 + 弹窗</h3>
          <el-tabs v-model="activeTab">
            <el-tab-pane label="上传" name="upload">这里是上传区域说明。</el-tab-pane>
            <el-tab-pane label="结果" name="result">这里展示解析结果。</el-tab-pane>
            <el-tab-pane label="问答" name="qa">这里是智能问答区域。</el-tab-pane>
          </el-tabs>

          <el-button type="warning" @click="dialogVisible = true" style="margin-top: 10px">
            打开弹窗
          </el-button>

          <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
            <span>你点击了弹窗按钮，这里是提示内容。</span>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取消</el-button>
              <el-button type="primary" @click="dialogVisible = false">确认</el-button>
            </span>
          </el-dialog>
        </el-card>

        <el-divider></el-divider>

        <!-- 按钮展示 -->
        <el-card>
          <h3>🎮 各种按钮展示</h3>
          <el-button type="primary">主要按钮</el-button>
          <el-button type="success">成功按钮</el-button>
          <el-button type="danger" @click="handleDanger">警告按钮</el-button>
        </el-card>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "TestElementUI",
  data() {
    return {
      form: {
        username: "",
        password: ""
      },
      file: null,
      dialogVisible: false,
      activeTab: "upload"
    };
  },
  methods: {
    handleUpload({ file }) {
      console.log("模拟上传逻辑：", file);
      this.$message.success("上传成功（模拟）");
    },
    fileChanged(fileObj) {
      this.file = fileObj.raw;
      console.log("文件已选择：", this.file);
    },
    submit() {
      if (!this.file) {
        this.$message.error("请先上传文件！");
        return;
      }
      this.handleUpload({ file: this.file });
    },
    onLogin() {
      this.$message.success(`登录成功，欢迎 ${this.form.username}`);
    },
    handleDanger() {
      this.$message({
        message: "你点了红色警告按钮！",
        type: "warning"
      });
    }
  }
};
</script>

<style scoped>
.upload-demo {
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
  background-color: #f5f5f5;
  padding: 20px;
  text-align: center;
}

.el-main {
  padding-top: 20px;
}

.el-card {
  margin-bottom: 20px;
}
</style>
